<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="" id="app" @click="fn2">

        <input type="text" v-model.trim="message" @keyup.enter="fn" @click.stop> <button
            @click.prevent.stop="fn">添加</button>
        <!-- 计算属性是一个计算的来的值，不能当作函数调用 -->
        <!-- 计算属性不能和data中变量名重名 -->
        <!-- 计算属性比函数更有有数 -->
        <!-- 计算属性会自动缓存计算结果，比函数减少运算次数 -->
        <div>{{totel}}</div>
        <div v-for="(item, index) in list">
            {{ item.name }}
            <button @click="list.splice(index, 1)">删除</button>
        </div>

    </div>


    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!',
                list: [
                    { id: 1, name: '张三', age: 20, sex: '男' },
                    { id: 2, name: '李四', age: 21, sex: '女' },
                    { id: 3, name: '王五', age: 22, sex: '男' }
                ]
            },
            methods: {
                fn() {

                    this.list.push({ name: this.message })
                },
                fn2() {
                    alert(123)
                }

            },
            computed: {
                totel() {
                    return this.list.reduce((pre, item) => {
                        return pre + item.age;
                    }, 0)
                }

            }
        })
    </script>
</body>

</html>